<template>
  <div class="step-form">
    <h3 class="text-xl font-semibold text-gray-800 mb-4">{{ stepData.title }}</h3>
    <p class="text-gray-600 mb-6">{{ stepData.description }}</p>
    
    <form @submit.prevent="submitForm">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <div v-for="(field, index) in stepData.fields" :key="index">
          <label :for="field.id" class="block text-sm font-medium text-gray-700 mb-1">
            {{ field.label }}
            <span v-if="field.required" class="text-red-500">*</span>
          </label>
          
          <div v-if="field.type === 'text' || field.type === 'email' || field.type === 'password'">
            <input 
              :type="field.type"
              :id="field.id"
              :name="field.id"
              :placeholder="field.placeholder"
              v-model="formData[field.id]"
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300"
              :required="field.required"
            />
          </div>
          
          <div v-if="field.type === 'select'">
            <select
              :id="field.id"
              :name="field.id"
              v-model="formData[field.id]"
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300"
              :required="field.required"
            >
              <option value="">请选择...</option>
              <option v-for="(option, optionIndex) in field.options" :key="optionIndex" :value="option.value">
                {{ option.label }}
              </option>
            </select>
          </div>
          
          <div v-if="field.type === 'textarea'">
            <textarea
              :id="field.id"
              :name="field.id"
              :placeholder="field.placeholder"
              v-model="formData[field.id]"
              rows="4"
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300"
              :required="field.required"
            ></textarea>
          </div>
        </div>
      </div>
      
      <div class="flex justify-end">
        <button 
          type="button"
          class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors duration-300 mr-3"
          @click="$emit('prev')"
        >
          <i class="fa fa-arrow-left mr-2"></i>上一步
        </button>
        
        <button 
          type="submit"
          class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-300"
        >
          下一步<i class="fa fa-arrow-right ml-2"></i>
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'StepForm',
  props: ['stepData'],
  data() {
    return {
      formData: {}
    };
  },
  methods: {
    submitForm() {
      // 这里可以添加表单验证逻辑
      console.log('表单数据:', this.formData);
      this.$emit('next', this.formData);
    }
  }
}
</script>

<style scoped>
.step-form {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>  